@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin flex-column {
  @include flex;
  flex-direction: column;
}
@mixin flex-column-around {
  @include flex-column;
  justify-content: space-around;

}
$color-gray:#878787;


// 凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。
$color:#1c9fea; //变蓝的颜色
$border:1px solid gray;
@mixin flex {
  display: flex;
}
@mixin flex-around {
  @include flex;
  justify-content: space-around;
}

@mixin flex-around-center {
  @include flex-around;
  align-items: center;
}
$back-white:white;

.display-column{
  @include flex-column;
}
.display-flex{
  @include flex;
}

.banner_small{
  border-radius: 3px;
  margin: 10px 10px;
  width: 140px;
  height: 105px;
}
.button_small{
  width: 70px !important;
  height: 24px !important;
  font-size: 12px !important;
  line-height: 24px !important;
  right: 7px !important;
  bottom: 0 !important;
}

.blue{
  color:$color;
}

.japan{
  height: 69vh;
  display: flex;
  flex-direction: column;
  .loading{
    text-align: center;
  }
  .japan_tit{
    // border-top: 1px solid gray;
    border-top:$border;
    margin:0px 5px;
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    .tit_l{
      display: flex;
      justify-content: space-around;
      span{
        margin-right: 5px;
      }
    }
    .tit_r{
      margin-right: 25px;
    }
    .fixed{
      position: fixed;
      width: 117px;
      height: 192px;
      flex-direction: column;
      @include flex-around-center;
      background-color: white;  
      border: $border;
      right: 10px;
      top: 176px;
    }
  }
  .japan_content{
    // padding-top: 500px ;
    overflow-y: scroll;
    padding-left: 10px;
    padding-right: 10px;
    height: 62vh;
    @include flex-column;
    .content_item{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
     
      .item_l{
        img{
          width: 150px;
          height: 112px;
        }
      }
      .item_r{
        display: flex;
        margin: 5px;
        flex-direction: column;
        justify-content: space-between;
        h3{
          font-weight: 400;
          font-size: 15px;
          margin: 0;
          padding: 0;
        }
       .r_mid{
            display: flex;
            justify-content: space-between;

            img{
              width: 18px;
              height: 18px;
              border-radius: 50%;
            }
          }
        .r_bot{
          color: #8c8c8c;
          font-size: 14px;
        }
      }
    }
  }
}